function ShowLineGraphic() {
	var width = 600,
		height = 300;

	var doChangeYScale = false;

	var palette = [
		'#2ec7c9', '#b6a2de', '#5ab1ef', '#ffb980', '#d87a80',
		'#8d98b3', '#e5cf0d', '#97b552', '#95706d', '#dc69aa',
		'#07a2a4', '#9a7fd1', '#588dd5', '#f5994e', '#c05050',
		'#59678c', '#c9ab00', '#7eb00a', '#6f5553', '#c14089'
	]

	function getColor(idx) {
		return palette[idx % palette.length];
	}

	// SVG画布边缘与图表内容的距离
	var padding = {
		top: 50,
		right: 50,
		bottom: 50,
		left: 50
	};
	// 创建一个分组用来组合要画的图表元素
	var main = d3.select('.line_continer svg').append('g')
		// 给这个分组加上main类
		.classed('main', true)
		// 设置该分组的transform属性
		.attr('transform', "translate(" + padding.top + ',' + padding.left + ')');

	// 数据
	var dataset = [];
	for(var i = 0; i < 12; i++) {
		dataset.push({
			x: i + 1,
			y: 0
		})
	}
	var graphicName = "";
	// 创建x轴的比例尺(线性比例尺)
	var xScale = d3.scale.linear()
		.domain(d3.extent(dataset, function(d) {
			return d.x;
		}))
		.range([0, width - padding.left - padding.right]);
	// 创建y轴的比例尺(线性比例尺)
	var yScale = d3.scale.linear()
		//		.domain([0, d3.max(dataset, function(d) {
		//			return d.y;
		//		})])
		.domain([0, 50])
		.range([height - padding.top - padding.bottom, 0]);
	// 创建x轴
	var xAxis = d3.svg.axis()
		.scale(xScale)
		.orient('bottom');
	// 创建y轴
	var yAxis = d3.svg.axis()
		.scale(yScale)
		.orient('left');
	// 添加SVG元素并与x轴进行“绑定”
	main.append('g')
		.attr('class', 'line_axis')
		.attr('transform', 'translate(0,' + (height - padding.top - padding.bottom) + ')')
		.call(xAxis);
	// 添加SVG元素并与y轴进行“绑定”
	var y_svg = main.append('g')
		.attr('class', 'line_axis')
		.call(yAxis);

	// 添加折线
	var line = d3.svg.line()
		.x(function(d) {
			return xScale(d.x)
		})
		.y(function(d) {
			return yScale(d.y);
		})
		// 选择线条的类型
		.interpolate('linear');
	// 添加path元素，并通过line()计算出值来赋值
	var pth = main.append('path')
		.attr('class', 'line')
		.attr('d', line(dataset));

	// 添加点
	main.selectAll('circle')
		.data(dataset)
		.enter()
		.append('circle')
		.attr('cx', function(d) {
			return xScale(d.x);
		})
		.attr('cy', function(d) {
			return yScale(d.y);
		})
		.attr('r', 5)
		.attr('fill', function(d, i) {
			return getColor(i);
		});

	//标题内容
	var title = main.append("text")
		.text(graphicName)
		.style("font-size", 15 + "px")
		.attr('transform', 'translate(' + (width / 2 - graphicName.length * 15 / 2) + ', -25)');
	//副标题介绍
	var title2 = main.append("text")
		.text("该类型占每月比例情况。单位:%")
		.style("font-size", 12 + "px")
		.attr('transform', 'translate(' + (width / 2 - graphicName.length * 12 / 2) + ', -11)');
	/*d3.select("#line_fresh_data")
	.on("click",function(){});*/

	window.ChangeLineData = function(tdataset, tname) {
		/*for(var i=0;i<dataset.length;i++){
			dataset[i].y=Math.floor(Math.random()*100);
		}*/
		if(arguments.length!=0)
		{
			dataset = tdataset;
			graphicName = tname;
		}

		title.text(graphicName);

		// 改变y轴的比例尺(线性比例尺)
		yScale = d3.scale.linear()
			.domain(doChangeYScale?[0, d3.max(dataset, function(d) {
				return d.y;
			})]
			:
			[0,50])
			.range( [height - padding.top - padding.bottom, 0]);

		yAxis = d3.svg.axis()
			.scale(yScale)
			.orient('left');

		y_svg.attr('class', 'line_axis')
			.call(yAxis);

		main.selectAll('circle')
			.data(dataset)
			//.enter()
			.transition()
			.duration(500)
			.ease("circle")
			.attr('cx', function(d) {
				return xScale(d.x);
			})
			.attr('cy', function(d) {
				return yScale(d.y);
			})
			.attr('r', 5)
			.attr('fill', function(d, i) {
				return getColor(i);
			});
		pth
			.transition()
			.duration(500)
			.ease("circle")
			.attr('class', 'line')
			.attr('d', line(dataset));

	}

	//-----------------------增加操作柄---------------------------//
	var btnList = d3.select("#line_btn_list")
		.style("overflow", "auto");
	var types = [];
	types = dataVar.shopType.numMap;
	var color = d3.scale.category20();
	btnList.selectAll("div")
		.data(types)
		.enter()
		.append('div')
		.text(function(d) {
			return d;
		})
		.style("display", "inline-table")
		.style("font-size", 12 + "px")
		.style("padding", 3 + "px")
		.style("width", 50 + "px")
		.style("height", 50 + "px")
		.style("background-color", function(d, i) {
			return color(i);
		})
		.on("click", function(d) {
			var tdata = [];
			var ty = 0;
			for(var i = 1; i < 13; i++) {
				if(MiuTK.isNumber(dataVar.typeInMonth[i][d])) {
					var monthSum = 0.000000000001;
					for(var o in dataVar.typeInMonth[i]) {
						monthSum += dataVar.typeInMonth[i][o];
					}
					ty = dataVar.typeInMonth[i][d] / monthSum * 100;
				}
				tdata.push({
					x: i,
					y: ty
				});
			}
			ChangeLineData(tdata, d + "类型每月热度变化情况");
		});
		
	function ToggleChange(){
		doChangeYScale=!doChangeYScale;
		if(!doChangeYScale){
			doChangeYScaleToggle.attr("fill","#EAD3CC");
		}else{
			doChangeYScaleToggle.attr("fill","#FF5725");
		}
		ChangeLineData();
	}
	var doChangeYScaleToggle=main.append("rect")
	.attr("x",350)
	.attr("y",228)
	.attr("width",20)
	.attr("height",20)
	.attr("fill","#EAD3CC")
	//.attr("opacity",0.8)
	.attr("stroke","#000")
	.attr("stroke-width",1)
	.on("click",ToggleChange);
	
	var dctyTxt=main.append("text")
	.text("按比例缩放尺度")
	.attr("x",350+22)
	.attr("y",228+19)
	.attr("font-size","15px")
	.on("click",ToggleChange);
};